<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='code'>
    </div>
    <script id='template-head' type="text/template">
        <h3 on-click={this.handlerClick}><span>sssss</span>{this.state.value}</h3>
    </script>

    

    <script src="template.js"></script>
    <script>

        //带构造函数的对象继承
        function Extend(Parent, Child) {
            var F = function () { }; //声明一个空类
            F.prototype = Parent.prototype; //这个类的 prototype 指向 父类的 prototype
            Child.prototype = new F(); //创建空类的对象，并将空类对象赋值给 子类的 prototype
            Child.prototype.constructor = Child; //将子类的构造函数改回自身的构造函数（指向父类的 ptotitype 的时候，被改为父类的构造函数了）
            Child.uper = Parent.prototype; //添加一个指向父类的属性
            return Child;
        }
        //基础组件
        var BaseComponent = function (props) {
            //容器
            this.container = document.createElement("div");
            this.state = {};
            this.element = null;
            this.componentchildren=[];

            if (typeof BaseComponent._inited_ == "undefined") {

                //返回 html
                BaseComponent.prototype.render = function () {

                }
                //更新 state
                BaseComponent.prototype.setState = function (obj) {
                    for (var key in obj) {
                        this.state[key] = obj[key];
                    }
                    //更新 element
                    var tempnode = this.getElement();
                    this.element.parentNode.replaceChild(tempnode, this.element);
                    this.element = tempnode;
                }

                //创建子组件
                BaseComponent.prototype.createComponent=function(comname,props)
                {
                    var func = new Function("props","return new "+comname+"(props)");
                    var component = func(props);
                    return component;
                }

                BaseComponent.prototype.handlerChild = function (children) {
                    for (var index = 0; index < children.length; index++) {
                        var node = children[index];
                        if (node.nodeName == '#text' && node.nodeValue.length > 0) {

                            var func = JSTemplate.getFunc(node.nodeValue)
                            var nodevalue = func.call(this, this, props);
                            node.nodeValue = nodevalue;
                        }
                        else if(node.nodeName == 'COMPONENT')
                        {
                            var comname = node.getAttribute("comname");
                            var com = this.createComponent(comname,{});
                            node.parentNode.replaceChild(com.getElement(), node);
                            this.componentchildren.push(com);
                        }
                        else {
                            var attrnames = node.getAttributeNames();
                            for (var key in attrnames) {
                                var name = attrnames[key];
                                if (name.indexOf("on-") > -1) {
                                    var attrvalue = node.getAttribute(name);
                                    //TODO添加事件监听
                                    /*
                                        将 this.去掉，然后根据值的层次，一层一层的往下取目标 事件处理方法
                                    */
                                    attrvalue = attrvalue.replace("this.", "").replace("{", "").replace("}", "");
                                    var func = this;
                                    var fninfo = attrvalue.split('.')
                                    for (var fnkey in fninfo) {
                                        var fnname = fninfo[fnkey];
                                        var func = func[fnname];
                                    }
                                    if (typeof func == 'function') node.addEventListener("click", func)

                                    node.removeAttribute(name)
                                }
                                else {

                                    var attrvalue = node.getAttribute(name);
                                    if (attrvalue.length > 0) {
                                        var func = JSTemplate.getFunc(attrvalue)
                                        attrvalue = func.call(this, this, props);
                                        node.removeAttribute(name);
                                        node.setAttribute(name, attrvalue);
                                    }
                                }
                            }
                        }
                        if (node.childNodes.length > 0) {
                            node.childNodes = this.handlerChild(node.childNodes)
                        }
                    }
                    return children;
                }

                //渲染（返回dom）
                BaseComponent.prototype.getElement = function () {

                    var templatecontent = this.render();
                    //var func = JSTemplate.getFunc(templatecontent)
                    //var html = func.call(this, this, props);
                    /*
                        将 html 放到一个 dom 容器中，然后再解析里面的事件标识
                    */
                    this.container.innerHTML = templatecontent;

                    this.container.childNodes = this.handlerChild(this.container.childNodes)
                    var child = this.container.children[0];
                    return child;
                }

                //渲染（返回dom）
                BaseComponent.prototype.handerRender = function () {
                    this.element = this.getElement();
                    return this.element;
                }
                BaseComponent._inited_ = true;
            }
        }


        var Item = Extend(BaseComponent, function (props) {
            BaseComponent.call(this, props);

            this.state = { value: new Date().getTime() };

            if (typeof Item._inited_ == "undefined") {

                //事件监听
                Item.prototype.handlerClick = function () {
                    console.log(this);
                    this.setState({ value: new Date().getTime() })
                }

                //覆盖获取模板内容的方法
                Item.prototype.render = function () {
                    return "<h3 on-click={this.handlerClick} attr={this.state.value}><span>sssss</span>{this.state.value}</h3>";
                }
                Item._inited_ = true;
            }

            this.handlerClick = this.handlerClick.bind(this);

        }); //继承 基础组件

        var HeadChild = Extend(BaseComponent, function (props) {
            BaseComponent.call(this, props);


            if (typeof HeadChild._inited_ == "undefined") {
                //覆盖获取模板内容的方法
                HeadChild.prototype.render = function () {
                    return "<a href='#'><component comname=Item /></a>";
                }
                HeadChild._inited_ = true;
            }

        }); //继承 基础组件


        debugger
        var root = document.getElementById("code");
        var head = new Item();
        var html = head.handerRender();

        var headchild = new HeadChild();
        var html1 = headchild.handerRender();

        root.appendChild(html);
        root.appendChild(html1);

    </script>
</body>

</html>